<template>
  <div>
    <div class="container">
      <p>
        USER/CONTENT <br />
        个人中心
      </p>
    </div>
    <div class="from">
      <div class="left">
        <div>
          <el-button type="primary" @click="$router.push('/Yonghu')" >个人中心</el-button>
        </div>
        <div>
          <el-button style="margin-top: 10px" @click="$router.push('/Shoucang')"   >我的收藏</el-button>
        </div>
      </div>
      <div class="right">
        <!-- <el-card  >:model="updateForm" -->
        <el-form  label-width="80px"  >
          <el-form-item label="id:">
            <el-input type="text" v-model="info.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="账号:">
            <el-input type="text" v-model="info.username"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input type="text" v-model="info.password"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input type="text" v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄:">
            <el-input type="text" v-model="info.age"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-input type="text" v-model="info.gender"></el-input>
          </el-form-item>
          <el-form-item label="手机号码:">
            <el-input type="text" v-model="info.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input type="text" v-model="info.email"></el-input>
          </el-form-item>
           <el-form-item label="编辑照片:">
          <el-input type="hidden" v-model="info.photo"></el-input>
          <el-upload 
            class="upload-demo" 
            action="info.photo"
            accept="image/jpeg,image/png,image/jpg"
            :limit="1" 
            :auto-upload="true"
            :http-request="uploadFileEdit"
            ref="upload"
            multiple>
            <!-- :http-request="upload" :http-request="uploadFile"-->
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传图片</div>
          </el-upload>
        </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-button
          type="primary" @click="update"  >更新信息</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info:{},
       nowImg:''
    };
  },
  methods: {
    async  update(){
      let {data:res} = await this.$axios.post("/user/update",this.info);
      if(res.code !=200) return this.$message.err(res.$message);
      this.$message.success(res.code);
    },
    async getUpdate(){
      let {data:res} = await this.$axios.get("/user/getlist");
      this.info = res.data.list[0]
    }
  },
  async uploadFileEdit() {
        const formData = new FormData();
        const file = this.$refs.upload.uploadFiles[0];
        const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
        if (!file) { // 若未选择文件
          alert('请选择文件');
          return;
        }
        window.console.log('图片解析为：  '+file.raw)
        formData.append('file', file.raw);
        formData.append('type', 'YONGHU');
        let {data: res} =  await this.$axios.post('/uploadImg', formData, headerConfig)
        window.console.log(res)
        window.console.log(res.data.imgurl)
        this.updateimgurl = res.data.imgurl
    },
  created(){
    this.getUpdate()
  }
};
</script>

<style scoped lang="scss"  >
.container {
  font-size: 25px;
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  padding: 10px;
}
.right {
  margin-left: 130px;
  margin-top: -50px;
  box-shadow: none;
}
.from {
  width: 50%;
  margin: 0 auto;
}
.footer {
  text-align: center;
}
</style>